<template>
    <div class="caiji">
        <ModalTitle title="采集员画像" />
        <div class="caiji-chart" ref="caijiChart"></div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue'
import { DuiWuJingXiHua } from '@/api/zhangzi'

export default {
    components: {
        ModalTitle
    },

    data() {
        return {

        }
    },

    mounted() {
        this.caijiChartData()
    },

    methods: {
        async caijiChartData() {
            const { success, data, message } = await DuiWuJingXiHua.personnelRefinementAPI()
            if (success) {
                let xData = data.map(e => e.name)
                let yData = data.map(e => e.fraction)
                this.caijiChartFn(xData, yData)
            } else {
                this.$message.error(message)
            }
        },

        caijiChartFn(xData, yData) {
            let caijiChar = echarts.init(this.$refs.caijiChart)
            let option = {
                color: [{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#00FDF4' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#00A2E2' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }],
                tooltip: {
                    show: true,
                    trigger: 'axis',
                },
                grid: {
                    containLabel: true,
                    left: 10,
                    right: 20,
                    bottom: 10,
                    top: 40,
                },
                xAxis: {
                    show: true,
                    // x轴刻度
                    axisTick: {
                        show: false,
                        interval: 1,
                    },
                    // x轴轴线
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        lineStyle: {
                            color: '#5FD7FC'
                        }
                    },
                    // x轴数据
                    data: xData,
                    // 显示指示线条
                    axisPointer: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                        }
                    },
                    textStyle: { color: '#fff', fontSize: 12 }
                },
                yAxis: {
                    show: true,
                    type: 'value',
                    name: '得分',
                    nameLocation: 'end',
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12,
                        align: 'center'
                    },
                    // y轴轴线
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        symbolOffset: [0, 15],
                        lineStyle: {
                            color: '#A1E3FD'
                        }
                    },
                    // y轴轴线
                    axisLabel: {
                        textStyle: {
                            show: true,
                            color: "#fff"
                        }
                    },
                    // y轴刻度
                    axisTick: {
                        show: true,
                        inside: true
                    },
                    // y轴分割线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#23597A'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        showBackground: true,
                        data: yData,
                        barWidth: 30,
                    },
                ],
            };

            caijiChar.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.caiji {
    width: 100%;
    height: 47.5rem;

    .caiji-chart {
        width: 100%;
        height: 38rem;
        margin-top: 2rem;
    }
}
</style>